<template>
	<view class="container">
		<!-- <plublic-navbar :is-back="true" :title="title" :background="background"></plublic-navbar>  :style="'margin-top:'+top/2+'px'"-->
		<u-sticky :offset-top="0">
			<view class="tabsBox u-flex" :style="'padding-top:'+top/3.5+'px'">
				<!-- <u-tabs @click="changCid" :list="catelist" lineWidth="30" lineColor="#25D59F" :current="current"
					:activeStyle="{
			        color: '#000000',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs> -->
				<view class="tabs" :class="{'curr':current==index}" v-for="(item,index) in catelist" :key="index" @click="changCid(item)">
					{{item.name}}
				</view>
			</view>
		</u-sticky>
		<view>

		</view>
		<view class="pagebox">
			<view class="list12">
				<view class="item" v-for="item in list" :key="item.id" @click="openFile(item)">
					<!-- <navigator :url="'/pages/article/detail?id=' + item.id" hover-class=""> -->
					<view class="u-flex u-row-between li">
						<u-image width="180rpx" height="180rpx" mode="scaleToFill" radius="10rpx" made="spacFit"
							:src="item.images"></u-image>
						<view class="txt">
							<view class="title u-line-1">{{item.title}}</view>

							<view class="date">
								{{$u.timeFormat(item.created_at, 'yyyy年mm月dd日')}}
							</view>
						</view>

					</view>

					<!-- </navigator> -->
				</view>
				<view class="" style="height: 100vh; background: #f2f2f2; padding-top: 100rpx;" v-if="list.length == 0">
					<u-empty mode="list" :icon="`${imgUrl}Elist.jpg`">
					</u-empty>
				</view>

			</view>
		</view>
		<tab-bar :currindex="currindex"></tab-bar>
	</view>
</template>

<script>
	import {
		getPageList
	} from '../../common/api.js';
	export default {
		data() {
			return {

				baseUrl: uni.$u.http.config.baseURL,
				imgUrl: uni.$u.http.config.imgUrl,
				background: '#ffffff',
				title: '新闻资讯',
				top: 0,
				id: 1,
				type: 1,
				pageno: 1,
				pageSize: 10,
				total_pages: 0,
				loading: true,
				current: 0,
				currindex: 3,
				catelist: [{
					id: 1,
					name: '知识'
				}, {
					id: 2,
					name: ' 活动',

				}],

				list: []
			}
		},
		onShow() {
			uni.hideTabBar({
					animation:false
				})
			this.current= 0
			console.log(this.current,'##############')
			this.list=[]
			this.getList();
		},
		onLoad(opt) {
			// console.log(opt)
			// this.current = opt.curr
			// if (opt.id) {
			// 	this.id = opt.id;
			// 	this.getList();
			// } else {
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// }
				// this.id = opt.id || 1;
				
			let that = this
			uni.getStorage({
				key: 'top',
				success: function(res) {
					that.top = res.data;
					console.log(res.data);
				}
			});
			uni.$u.sleep(2000).then(() => {
				this.loading = false
			})
		},
		onPullDownRefresh() {
			// console.log('refresh');
			const that = this
			setTimeout(function() {
				uni.stopPullDownRefresh();
				// that.getHomeProduc()
				// that.pageno=1
			}, 1000);
		},
		onReachBottom() {
			if (this.pageno < this.total_pages) {
				this.pageno++;
				this.getList()
			}

			// console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑',this.pageno);
		},
		// 滚动监听事件
		onPageScroll(object) {
			//this.show = object.scrollTop >= this.scrollTop;
			let scrollTop = object.scrollTop;
			if (scrollTop > 40) {
				this.background = "#69adf5";
			} else {
				this.background = "#ffffff";
			}

			console.log('开始滚动', object.scrollTop)
			this.isShowLog = 2
			// 只要滚动就清除状态
			clearTimeout(this.timer)
			// 告知标识 -> 开始滚动
			this.flag = false
			// 检测是否停留了 N 秒
			// 如果停留则表示滚动结束
			// N: 500(定时器时间 毫秒) -> 0.5秒算停止滚动
			// 滚动后多长时间算停止滚动
			this.timer = setTimeout(() => {
				// console.log('结束滚动')
				this.isShowLog = 0
				// 告知标识 -> 结束滚动
				this.flag = true;
			}, 500);
		},
		methods: {
			goPage(e) {
				// console.log(this.globals)
				// return 
				// uni.navigateTo({
				// 	url: e
				// })
				this.globals.linkJump({
					url: e,
					callback: () => {
						uni.setStorageSync('pagelist', e)
					}
				});
				// uni.navigateTo({
				// 	url: e
				// })
			},
			async getList() {
				let data = {
					categoryId: this.id,
					pageNo: this.pageno,
					pageSize: this.pageSize
				}
				await getPageList({
					params: data
				}).then(res => {
					this.total_pages = Math.ceil(res.total / 10)
					this.list = this.list.concat(res.list)
				}).catch(err => {

				})
			},
			changCid(item) {
				
				this.id = item.id
				if (item.id == 2) {
					uni.navigateTo({
						url: '/pages/finds/activity?id=2'
					})
				} else {
					this.list = []
					this.getList()
				}
				// this.getList()
			},
			openFile(item) {
				console.log(item)
				let url = "/pages/finds/detail?id=" + item.id
				this.goPage(url)


			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #ffffff;
		padding: 0rpx 30rpx 30rpx 30rpx
	}

	.tabsBox{
		padding: 30rpx 0;
		    background: #ffffff;
		    margin-bottom: 10px;
		    margin-left: -30rpx;
		    margin-right: -30rpx;
		.tabs{
			font-size: 28rpx;
			color: #000000;
			position: relative;
			padding: 0 30rpx;
		}
		.tabs.curr::after{
			position: absolute;
			left: 30%;
			bottom: -20rpx;
			width: 40%;
			height: 8rpx;
			background: #25D59F;
			border-radius: 5rpx;
			z-index: 1;
			content:""
		}
		.tabs.curr{
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.list12 {
		.item {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 16rpx 0;
			margin-bottom: 20rpx;

			.li {
				width: 100%;
				overflow: hidden;
			}

			.txt {
				width: calc(100% - 220rpx);

				.title {
					line-height: 1;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;

					text-align: left;
					font-style: normal;
					margin-bottom: 20rpx;

				}


				.date {
					color: #84929A;
					font-size: 20rpx;
				}

			}
		}

	}
</style>